<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-text"></i> {{title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="keyUser" placeholder="搜索标题" class="handle-input mr10"></el-input>
        
        <el-button type="primary" icon="search" @click="handleAdd()">添加</el-button>
      </div>
      <el-table :data="searchUserinfo(keyUser)" border class="table" ref="multipleTable" >
          <el-table-column label="序号" width="50px" align="center">
            <template slot-scope="scope">
              {{ scope.$index + (currentPage - 1) * pageSize + 1 }}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
            </template>
          </el-table-column>
        <el-table-column prop="a_title" label="标题" sortable>
        </el-table-column>
        <el-table-column prop="a_desc" label="摘要">
        </el-table-column>
        <el-table-column prop="a_cate" label="所属分类">
        </el-table-column>
        
        <el-table-column label="创建时间" width="120" align="center">                       
            <template slot-scope="scope">                            
                <span>{{ scope.row.a_createat | moment }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="userList.length">
                    </el-pagination>
      </div>
    </div>

    <!-- 添加弹出框 -->
    <el-dialog title="添加文章" :visible.sync="addVisible" width="80%">
      <el-form ref="form" :model="addForm" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="addForm.a_title"></el-input>
        </el-form-item>
        <el-form-item label="分类管理">
          <el-select v-model="addForm.a_cate" placeholder="请选择">
            <el-option :label="item.c_name" :value="item.c_name" v-for="item in cateList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="摘要">
          <el-input type="textarea" rows="5" v-model="addForm.a_desc"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <quill-editor ref="myTextEditor1" v-model="addForm.a_content" ></quill-editor>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹出框 -->
    <el-dialog title="修改文章" :visible.sync="editVisible" width="80%">
      <el-form ref="form" :model="editForm" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="editForm.a_title"></el-input>
        </el-form-item>
        <el-form-item label="分类管理">
          <el-select v-model="editForm.a_cate" placeholder="请选择">
            <el-option :label="item.c_name" :value="item.c_name" v-for="item in cateList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="摘要">
          <el-input type="textarea" rows="5" v-model="editForm.a_desc"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <quill-editor ref="myTextEditor2" v-model="editForm.a_content"></quill-editor>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除提示框 -->
    <!-- <el-dialog title="删除文章提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
    </el-dialog> -->
  </div>
</template>

<script>
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import { quillEditor } from 'vue-quill-editor';
  export default {
    data () {
      return {
        title: this.$route.meta.title,
        tableData: [],
        userList:[],
        keyUser:"",
        addVisible: false,
        editVisible: false,
        delVisible: false,
        currentPage:1,
        pageSizes:[2,4,12,16],
        pageSize:4,
        editForm: {

        },
        addForm: {

        },
        cateList:[]
        
      }
    },
    components: {
      quillEditor
    },
    created () {
      this.getUserinfo();
      this.getCateList()
    },
    methods: {
      getCateList(){
        this.$axios.get('/cate/all').then(res=>{
          this.cateList = res.data
        })
      },
        getUserinfo(){
            this.$axios.get('/article/all').then(res=>{
                this.userList = res.data
                this.getPageData()
            })
        },
        getPageData(){
            let start = (this.currentPage-1)*this.pageSize;
            let end = start+this.pageSize;
            this.tableData = this.userList.slice(start,end)
        },
        searchUserinfo(keyUser){
            return this.tableData.filter((user)=>{
                if(user.a_title.includes(keyUser)){
                    return user
                }
            })
        },
        handleEdit(index,row){
            
            this.editForm = {
                id:row.id,
                a_title:row.a_title,
                a_cate:row.a_cate,
                a_content:row.a_content,
                a_desc:row.a_desc
            }    
            this.editVisible = true       
        },
        handleAdd(){
            this.addVisible = true;
            
        },
        saveAdd(){
            
            this.$axios.post('/article/add',this.addForm).then(res=>{
                        this.$message({
                            type:"success",
                            message:"添加信息成功"
                        })
                        this.addVisible =false;
                        this.getUserinfo()
            })
            
        },
        saveEdit(){
            let editdata = {
                id:this.editForm.id,
                a_title:this.editForm.a_title,
                a_cate:this.editForm.a_cate,
                a_content:this.editForm.a_content,
                a_desc:this.editForm.a_desc
            }
            this.$axios.put('/article/update',editdata).then(res=>{
                        this.$message({
                            type:"success",
                            message:"添加信息成功"
                        })
                        this.editVisible =false;
                        this.getUserinfo()
            })
        },
        handleDelete(index,row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                let params = {
                    id:row.id
                }
                this.$axios.delete("/article/del",{data:params}).then(res=>{
                    this.$message({
                            type:"success",
                            message:"删除信息成功"
                        })
                    this.getUserinfo()
                })
            }).catch(()=>{
                console.log("放弃了")
            })
        },
        handleSizeChange(val){
            this.pageSize = val
            // this.getUserinfo()
            this.getPageData()
        },
        handleCurrentChange(val){
            this.currentPage = val
            this.getPageData()


        }
    }
  }

</script>

<style scoped>

  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .del-dialog-cnt {
    font-size: 16px;
    text-align: center
  }
  .red{
    color:red;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .crumbs{
      margin: 10px;
}
.container{
      padding: 20px;
      background: #fff;
      margin: 10px; }
</style>
